<template>
	<view class="Reconciliation">
		<view class="container">
			<view class="title">欠款对账单</view>
			<view class="form">
				<view class="cell">
					<view class="label">客 户</view>
					<view class="content">
						{{entity.CustomerName}}
					</view>
				</view>
				<view class="cell">
					<view class="label">电 话</view>
					<view class="content">
						{{entity.CustomerPhone?entity.CustomerPhone:''}}
					</view>
				</view>
				<view class="cell">
					<view class="label">地 址</view>
					<view class="content">
						{{entity.CustomerAddress?entity.CustomerAddress:''}}
					</view>
				</view>
				<view class="cell">
					<view class="label">账 期</view>
					<view class="content">
						{{query.StartTime}} ~ {{query.EndTime}}
					</view>
				</view>
				<view class="cell">
					<view class="label">上期余额</view>
					<view class="content cRight">
						{{momenyFormat(entity.Balance)}}
					</view>
				</view>
				<view class="cell">
					<view class="label">本期新欠</view>
					<view class="content cRight">
						{{momenyFormat(entity.Arrears)}}
					</view>
				</view>
				<view class="cell">
					<view class="label">本期还款</view>
					<view class="content cRight">
						{{momenyFormat(entity.Repayment)}}
					</view>
				</view>
				<view class="cell">
					<view class="label">本期余额</view>
					<view class="content cRight">
						{{momenyFormat(entity.Residue)}}
					</view>
				</view>
			</view>
			<view class="table">
				<view class="tr">
					<view class="th td">日期</view>
					<!-- <view class="th td action">类型</view> -->
					<view class="th td">金额</view>
					<view class="th td">欠款余额</view>
					<view class="th td action">操作</view>
				</view>
				<view class="tr" v-if="data.length>0">
					<view class="td"> 初期欠款 </view>
					<!-- <view class="td action"> </view> -->
					<view class="td"> </view>
					<view class="td"> {{momenyFormat(data[0].PreviousOwing)}} </view>
					<view class="td action"> </view>
				</view>
				<view v-for="item in data" :key="item.Id" :class="item.Type==3?'warn tr':'tr'">
					<view class="td">
						{{item.CreateTime.substring(0,10)}}
					</view>
					<!-- <view class="td action">
						{{item.Type==0?'还款':item.Type==1?'挂账':'作废'}}
					</view> -->
					<view class="td">
						{{momenyFormat(item.Money)}}
					</view>
					<view class="td">
						{{momenyFormat(item.Owing)}}
					</view>
					<view class="td action">
						<text @click="toList(item.BillId)" v-if="item.Type!=0">详情</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="base64" class="imgBox">
			<img class="img" v-if="!entity.Signature" :src="base64" alt="客户签名" @click="$refs.popup.open()">
		</view>
		<view v-if="!entity.Signature&&!base64" @click="$refs.popup.open()" style="
		      height: 200px;
		      border: 1px solid #ccc;
		      line-height: 200px;
		      text-align: center;
			  width: 100%;
		    ">
			请签名
		</view>
		<view v-if="entity.Signature" class="imgBox">
			<img class="img" :src="entity.Signature" alt="客户签名">
		</view>
		<!-- <button v-if="base64" class="confirm" type="primary" @click="confirm">确认</button> -->

		<view class="fixedBox">
			<view v-if="!entity.Signature" style="display: flex; justify-content: space-between;">
				<button class="submitButton" disabled style="width: 270rpx;">待确认</button>
				<button class="submitButton" @click="confirm" round type="primary">确认
				</button>
			</view>
			<view v-else style="display: flex; justify-content: space-between;">
				<button class="submitButton" disabled style="width: 270rpx;">已确认</button>
				<button class="submitButton" disabled round type="primary">当前对账单已签字
				</button>
			</view>
		</view>

		<!-- 弹出签字 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom" :is-mask-click="false">
			<Sign ref="sign" @finish="signFinish" @close="signClose" />
		</uni-popup>
	</view>
</template>

<script>
	import Sign from '@/components/sign.vue'
	export default {
		components: {
			Sign
		},
		data() {
			return {
				entity: {},
				data: [],
				base64: '',
				query: {}
			}
		},
		onLoad(query) {
			this.query = JSON.parse(query.data)
			console.log(this.query);
			this.getTheData()
		},
		methods: {
			toList(Id) {
				uni.navigateTo({
					url: '/pages/Reconciliation/List?Id=' + Id
				})
			},
			getTheData() {
				this.$http('post', '/BO/BIllcollection/GetReconciliationData', {
					"CompanyId": this.query.CompanyId,
					"CustomerId": this.query.CustomerId,
					"StartTime": this.query.StartTime,
					"EndTime": this.query.EndTime,
					"BillConfirmId": this.query.BillConfirmId
				}).then(res => {
					console.log(res);
					if (!res.Success) {
						uni.showToast({
							icon: 'none',
							title: '当前对账单已签单'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
						return
					}
					this.entity = res.Data
					this.data = res.Data.BIllcollectionList
				})
			},
			momenyFormat(num) {
				num = Number(num)
				if (isNaN(num)) return '0.00'
				return num.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
			},
			confirm() {
				if (!this.base64) return this.$refs.popup.open()
				this.entity.Signature = this.base64
				this.entity.BillConfirmId = this.query.BillConfirmId
				this.entity.SignPhone = uni.getStorageSync('userInfo').phone
				this.$http('post', '/BO/BIllcollection/ConfirmReconciliationData', this.entity).then(res => {
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '确认成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			signFinish(base64) {
				this.base64 = base64
				this.$refs.popup.close()
			},
			signClose() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.warn {
		background-color: #ff9999;
	}

	.fixedBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		padding-bottom: 30px;
		z-index: 9;

		.submitButton {
			margin: 0 auto;
			margin-top: 10px;
			width: 90vw;
			display: block;
			border-radius: 5px;
		}
	}

	.Reconciliation {
		padding: 10px;
		padding-bottom: 180rpx;
		color: #000;

		.imgBox {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 180px;
			overflow: hidden;
			width: 100%;
		}

		.img {
			transform: rotate(-90deg);
			width: 160px;
		}

		.container {
			width: 100%;

			.title {
				font-weight: bold;
				text-align: center;
			}

			.form {
				margin: 30rpx 0;
				border-bottom: 1px solid #ccc;
				line-height: 2.5;

				.cell {
					border: 1px solid #ccc;
					border-bottom: none;
					display: flex;

					.label {
						width: 150rpx;
						border-right: 1px solid #ccc;
						padding-right: 20rpx;
						text-align: right;
						background-color: #fafafa;
					}

					.content {
						flex: 1;
						padding: 0 20rpx;
					}

					.cRight {
						text-align: right;
					}
				}
			}

			.table {
				border-bottom: 1px solid #ccc;

				.tr {
					border: 1px solid #ccc;
					border-bottom: none;
					display: flex;
					align-items: center;
					height: 100%;

					.td {
						padding: 10rpx 10rpx;
						height: 100%;
						// border-right: 1px solid #ccc;
						flex: 1;
						text-align: center;
						font-size: 12px;
					}

					.th {
						font-weight: bold;
						line-height: 2;
						font-size: 15px;
					}

					.action {
						flex: inherit;
						width: 70rpx;

						text {
							color: blue;
						}
					}
				}
			}
		}

		.confirm {
			position: fixed;
			right: 30rpx;
			bottom: 60rpx;
		}
	}
</style>